<template>
    <show-modal :title="title" :loading="loading" width="600px" @cancel="cancel" :isSure="!isDisabled" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="任务名称" prop="orderName">
                <a-input v-model.trim="form.orderName" disabled/>
            </a-form-model-item>
            <!-- <a-form-model-item label="任务地点" prop="address">
                <a-input v-model.trim="form.address" disabled/>
            </a-form-model-item> -->
            <a-form-model-item label="执行时间" v-if="form.startTime">
                <a-input disabled v-model="form.startTime+' ~ '+form.endTime" />
            </a-form-model-item>
            <a-form-model-item label="结束时间" v-if="form.lastTime">
                <a-input disabled v-model="form.lastTime" />
            </a-form-model-item>
            <a-form-model-item label="任务详情" prop="content">
                <a-textarea disabled v-model="form.content" />
            </a-form-model-item>
            <a-form-model-item label="参考文件" prop="content" v-if="form.nodeImageUrl.length">
                <upload-file :list="form.nodeImageUrl" disabled/>
            </a-form-model-item>

            <a-form-model-item label="附件" prop="">
                <upload-picture :list="form.imageUrl" v-if="!isDisabled || (isDisabled && form.imageUrl.length)" :disabled="isDisabled" @upload="uploadImages" @delete="deleteFile"/>
                <a-textarea placeholder="审批意见" :disabled="isDisabled" v-model="form.approvals" />
            </a-form-model-item>
            <a-form-model-item label="打分" prop="score" v-if="form.nodeScoreLimit && form.nodeSeq!=1">
                <a-input-number
                    placeholder="请输入积分"
                    :precision="1"
                    :min="0" 
                    v-if="!isDisabled"
                    :max="form.nodeScoreLimit"
                    :disabled="isDisabled"
                    class="form_item"
                    v-model="form.score" />
                <a-input-number v-else disabled :precision="1" :min="0"  class="form_item" v-model="form.nodeScore" />
                <!-- <p class="tip_number">只可输入整数</p> -->
            </a-form-model-item>
            <a-form-model-item label="审批结果" prop="isApprove" v-if="form.nodeSeq!=1">
                <a-switch :checked="isApprove" :disabled="isDisabled" checked-children="同意" un-checked-children="驳回" @change="changeAudit" />
            </a-form-model-item>
            <a-form-model-item label="审批流程" v-if="trackList.length">
                <a-timeline>
                    <a-timeline-item v-for="item in trackList" :key="item.id" :color="item.result=='同意'?'blue':'red'">
                        <a-icon slot="dot" v-if="item.result=='同意'" type="check-circle" style="font-size: 16px;" />
                        <a-icon slot="dot" v-else type="close-circle" style="font-size: 16px;" />
                        <div class="node">
                            <span class="name">{{item.leaderName}}({{item.result}})</span><span>{{item.updateTime}}</span>
                            <p class="desc">审批分数：{{item.score}}分</p>
                            <p class="desc">处理意见：{{item.approvals}}</p>
                            <div v-if="item.imageUrl">
                                <upload-picture :list="item.imageUrl.split(',')" :disabled="true"/>
                            </div>
                        </div>
                    </a-timeline-item>
                </a-timeline>
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>
<script>
import {rules} from './rules'
import UploadPicture from '@/components/uploadPicture'
import {deepClone} from '@/utils'
import {remoteProcessList,approveAction,returnAction} from '@/api/workorder/flow'
import UploadFile from '@/components/uploadFile'

export default {
    name:'OperationInfo',
    components:{
        UploadPicture,
        UploadFile
    },
    props:{
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return{
            loading: false,
            rules,
            title: '层级信息',
            form:{
                approvals:'',
                score:null,
                imageUrl:[]
            },
            isApprove:true,
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 20 }
            },
            trackList:[]
        }
    },
    computed:{
        isDisabled(){
            return this.info.status=='待处理'?false:true
        }
    },
    created(){
        this.form = {...this.form,...this.info};
        console.log(this.info)
        let {imageUrl,orderId,nodeImageUrl,nodeScoreLimit} = this.form;
        this.form.nodeScoreLimit = Number(nodeScoreLimit)
        if(!imageUrl){
            this.form.imageUrl = []
        }else{
            this.form.imageUrl = imageUrl.split(',')
        }
        if(nodeImageUrl){
            this.form.nodeImageUrl = nodeImageUrl.split(',')
        }
        this.getTrackList(orderId)
    },
    methods:{
        submit(){
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = null;
                        this.loading = true;
                        let form = deepClone(this.form);
                        let {id,approvals,score,address} = form;
                        let info = {
                            id,approvals,score,address
                        };
                        info.imageUrl = form.imageUrl.join(',')
                        if (this.isApprove) {
                            res = await approveAction(info);
                        } else {
                            res = await returnAction(info);
                        }
                        this.$message.success('处理完成!');
                        this.$emit('submit');
                    } finally {
                        this.loading = false
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        uploadImages(e){
            this.form.imageUrl.push(e)
        },
        deleteFile(index){
            this.form.imageUrl.splice(index,1)
        },
        cancel(){
            this.$emit('cancel')
        },
        changeAudit(e){
            this.isApprove = e;
        },
        async getTrackList(id){
            let res = await remoteProcessList(id);
            this.trackList = res.data;
        }
    }
}
</script>
<style lang="scss" scoped>
.node{
    font-size: 13px;
    color: #666;
    .name{
        margin-right: 30px;
        color: #333;
    }
    .desc{
        margin: 10px 0;
    }
}
</style>